<%--
  Created by IntelliJ IDEA.
  User: Lemon
  Date: 2020/6/11
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>服务统计(全)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"  media="all">
</head>
<body>
<div class="layui-container">
    <form class="layui-form" style="margin-top:30px;">
        <div class="layui-form-item" style="text-align:center;">
            <div class="layui-inline" style="margin-left: -30px;">
                <label class="layui-form-label">分类：</label>
                <div class="layui-input-inline" style="width:110px;">
                    <select>
                        <option value="status" selected>服务状态</option>
                        <option value="type" >服务类别</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 30px;">近</label>
                <div class="layui-input-inline" style="width:80px;">
                    <select>
                        <option value="7" selected>7天</option>
                        <option value="30" >30天</option>
                        <option value="90" >90天</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-primary" type="button">确定</button>
            </div>
        </div>
    </form>
    <div id="serviceStatisticsAll" style="width:100%;height:600px">
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element','jquery','layer','form','laydate','layedit'], function() {
        var $ = layui.jquery
            ,element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;

    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('serviceStatisticsAll'));

    // 指定图表的配置项和数据
     var option = {
         title: {
             text: '7天内服务状态统计情况',
             subtext: '数据来源：所有的客户服务数据',
         },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
            },
        },
         toolbox:{  //工具栏
             show: true,
             feature:{
                 dataView: {readOnly: false},
                 magicType: {type: ['line', 'bar']},  //图形切换
                 restore: {},
                 saveAsImage: {}
             }
         },
        legend: {
            data: ['处理中', '已处理', '已归档', '未处理'],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
        },
        yAxis: {
            data: ["yaoming","qiaodan"]
        },
         dataZoom: [
             {
                 id: 'dataZoomY',
                 type: 'slider',
                 yAxisIndex: [0],
                 filterMode: 'empty'
             }
         ],
        series: [
            {
                name: '处理中',
                type: 'bar',
                stack: '状态',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: [1, 0]
            },
            {
                name: '已处理',
                type: 'bar',
                stack: '状态',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: [1, 0]
            },
            {
                name: '已归档',
                type: 'bar',
                stack: '状态',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: [0, 0]
            },
            {
                name: '未处理',
                type: 'bar',
                stack: '状态',
                label: {
                    show: true,
                    position: 'insideRight'
                },
                data: [0, 0]
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</html>